<template>
  <div class="inventory-analysis-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>库存分析</span>
          <div class="header-operations">
            <el-date-picker
              v-model="analysisDate"
              type="month"
              placeholder="选择月份"
              @change="handleDateChange"
            />
            <el-button type="primary" @click="handleExport">导出分析</el-button>
          </div>
        </div>
      </template>

      <!-- 分析指标卡片 -->
      <el-row :gutter="20" class="dashboard-cards">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>库存总额</span>
                <el-tooltip content="当前库存商品的总金额" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="card-value">
              <span class="amount">{{ totalAmount }}</span>
              <span class="unit">元</span>
            </div>
            <div class="card-compare">
              较上月
              <span :class="amountCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(amountCompare) }}%
                <el-icon>
                  <component
                    :is="amountCompare >= 0 ? 'ArrowUp' : 'ArrowDown'"
                  />
                </el-icon>
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>周转率</span>
                <el-tooltip content="月度销售成本/平均库存" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="card-value">
              <span class="amount">{{ turnoverRate }}</span>
              <span class="unit">次/月</span>
            </div>
            <div class="card-compare">
              较上月
              <span :class="turnoverCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(turnoverCompare) }}%
                <el-icon>
                  <component
                    :is="turnoverCompare >= 0 ? 'ArrowUp' : 'ArrowDown'"
                  />
                </el-icon>
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>呆滞品数</span>
                <el-tooltip
                  content="超过90天未发生移动的物料数量"
                  placement="top"
                >
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="card-value">
              <span class="amount">{{ stagnantCount }}</span>
              <span class="unit">个</span>
            </div>
            <div class="card-compare">
              较上月
              <span :class="stagnantCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(stagnantCompare) }}%
                <el-icon>
                  <component
                    :is="stagnantCompare >= 0 ? 'ArrowUp' : 'ArrowDown'"
                  />
                </el-icon>
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>库存准确率</span>
                <el-tooltip content="盘点准确SKU数/盘点总SKU数" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="card-value">
              <span class="amount">{{ accuracyRate }}</span>
              <span class="unit">%</span>
            </div>
            <div class="card-compare">
              较上月
              <span :class="accuracyCompare >= 0 ? 'up' : 'down'">
                {{ Math.abs(accuracyCompare) }}%
                <el-icon>
                  <component
                    :is="accuracyCompare >= 0 ? 'ArrowUp' : 'ArrowDown'"
                  />
                </el-icon>
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分析图表 -->
      <el-row :gutter="20" class="chart-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>库存金额趋势</span>
                <el-select v-model="amountChartType" size="small">
                  <el-option label="月度" value="month" />
                  <el-option label="季度" value="quarter" />
                  <el-option label="年度" value="year" />
                </el-select>
              </div>
            </template>
            <div class="chart-container">
              <v-chart :option="amountChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>周转率分析</span>
                <el-select v-model="turnoverChartType" size="small">
                  <el-option label="按类别" value="category" />
                  <el-option label="按仓库" value="warehouse" />
                </el-select>
              </div>
            </template>
            <div class="chart-container">
              <v-chart :option="turnoverChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="chart-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>ABC分类分析</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart :option="abcChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>呆滞品分析</span>
                <el-select v-model="stagnantChartType" size="small">
                  <el-option label="按金额" value="amount" />
                  <el-option label="按数量" value="quantity" />
                </el-select>
              </div>
            </template>
            <div class="chart-container">
              <v-chart :option="stagnantChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 明细数据 -->
      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="周转率明细" name="turnover">
          <el-table :data="turnoverTableData" border style="width: 100%">
            <el-table-column prop="materialCode" label="物料编码" width="150" />
            <el-table-column
              prop="materialName"
              label="物料名称"
              min-width="150"
            />
            <el-table-column prop="category" label="类别" width="120" />
            <el-table-column prop="warehouse" label="仓库" width="120" />
            <el-table-column
              prop="averageInventory"
              label="平均库存"
              width="120"
            />
            <el-table-column
              prop="monthlyConsumption"
              label="月度消耗"
              width="120"
            />
            <el-table-column prop="turnoverRate" label="周转率" width="100">
              <template #default="scope">
                {{ scope.row.turnoverRate.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="turnoverDays" label="周转天数" width="100">
              <template #default="scope">
                {{ scope.row.turnoverDays.toFixed(0) }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="呆滞品明细" name="stagnant">
          <el-table :data="stagnantTableData" border style="width: 100%">
            <el-table-column prop="materialCode" label="物料编码" width="150" />
            <el-table-column
              prop="materialName"
              label="物料名称"
              min-width="150"
            />
            <el-table-column prop="category" label="类别" width="120" />
            <el-table-column prop="warehouse" label="仓库" width="120" />
            <el-table-column prop="quantity" label="库存数量" width="120" />
            <el-table-column prop="amount" label="库存金额" width="120" />
            <el-table-column
              prop="lastMoveDate"
              label="最后移动日期"
              width="180"
            />
            <el-table-column prop="stagnantDays" label="呆滞天数" width="100" />
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="ABC分类明细" name="abc">
          <el-table :data="abcTableData" border style="width: 100%">
            <el-table-column prop="materialCode" label="物料编码" width="150" />
            <el-table-column
              prop="materialName"
              label="物料名称"
              min-width="150"
            />
            <el-table-column prop="category" label="类别" width="120" />
            <el-table-column prop="consumption" label="年度消耗" width="120" />
            <el-table-column prop="percentage" label="占比" width="100">
              <template #default="scope">
                {{ scope.row.percentage.toFixed(2) }}%
              </template>
            </el-table-column>
            <el-table-column prop="accumulation" label="累计占比" width="100">
              <template #default="scope">
                {{ scope.row.accumulation.toFixed(2) }}%
              </template>
            </el-table-column>
            <el-table-column prop="abcClass" label="ABC分类" width="100">
              <template #default="scope">
                <el-tag :type="getAbcTagType(scope.row.abcClass)">
                  {{ scope.row.abcClass }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart, BarChart, PieChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
} from "echarts/components";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
]);

// ... 省略状态定义和方法实现 ...

const getAbcTagType = (abcClass) => {
  const map = {
    A: "success",
    B: "warning",
    C: "info",
  };
  return map[abcClass] || "";
};

// 图表配置
const amountChartOption = {
  // ... 库存金额趋势图配置
};

const turnoverChartOption = {
  // ... 周转率分析图配置
};

const abcChartOption = {
  // ... ABC分类分析图配置
};

const stagnantChartOption = {
  // ... 呆滞品分析图配置
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  loadDetailData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadDetailData();
};

// 导出方法
const handleExport = () => {
  // 实现导出逻辑
  ElMessage.success("导出成功");
};

onMounted(() => {
  // 加载初始数据
  loadAnalysisData();
  loadDetailData();
});
</script>

<style scoped>
.inventory-analysis-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.dashboard-cards {
  margin-bottom: 20px;
}

.card-value {
  text-align: center;
  margin: 10px 0;
}

.card-value .amount {
  font-size: 24px;
  font-weight: bold;
}

.card-value .unit {
  font-size: 14px;
  margin-left: 5px;
  color: #909399;
}

.card-compare {
  text-align: center;
  font-size: 14px;
  color: #909399;
}

.card-compare .up {
  color: #67c23a;
}

.card-compare .down {
  color: #f56c6c;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  height: 350px;
}

.detail-tabs {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
